<template>
  <div class="app-container">
    <div class="tabs-box">
      <div class="operation" style="margin-bottom: 20px">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加服务器</el-button>
        <div class="right">
          <div class="query-box">
            <span class="label">归属项目</span>
            <el-input
              class="input"
              placeholder="查工作项名称"
              prefix-icon="el-icon-search"
              @blur="handleQuery"
              v-model="queryParams.cPmNme">
            </el-input>
          </div>
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">批量导出</el-dropdown-item>
              <el-dropdown-item command="2">批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        v-loading="loading"
        height="400"
        :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
        :data="configList"
        @selection-change="handleSelectionChange"
        border
        :row-class-name="tableClass">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="Ip地址" align="left" prop="ip" sortable />
        <el-table-column label="Cpu" align="center" prop="cpu" />
        <el-table-column label="内存" align="center" prop="memory" />
        <el-table-column label="存储" align="center" prop="storage" />
        <el-table-column label="操作" align="center" header-align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row, 'single')"
            >
              <el-button
                size="mini"
                slot="reference"
              >删除</el-button>
            </el-popconfirm>
            <el-button
              size="mini"
              style="margin-left: 15px"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add ref="add" @upDate="getList" />
  </div>
</template>

<script>
import {mixin} from "@/views/projectManage/mixin";
import add from './add'

export default {
  name: "index",
  components: {add},
  mixins: [mixin],
  data() {
    return {
      queryParams: {},
      loading: false,
      configList: [
        {
          ip: '10.29.19.2',
          cpu: 'i9-19400K',
          memory: '256G',
          storage: '20T'
        }
      ]
    }
  },
  methods: {
    getList() {

    },
    handleSelectionChange() {

    },
    handleUpdate(row) {
      this.$refs.add.open(row)
    },
    handleDelete(row, type) {
      let postId = ''
      if (type === 'single') {
        postId = row.postId
      } else {
        const list = []
        row.forEach(i => list.push(i.postId))
        postId = list.join(',')
      }
    },
    handleAdd() {
      this.$refs.add.open()
    },
    handleQuery() {},
    handleCommand() {}
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
</style>
